<%--
  Created by IntelliJ IDEA.
  User: 29688
  Date: 2021/3/31
  Time: 21:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>消息中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css"
          media="all">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/admin.css"
          media="all">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui-v2.5.7/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.js" ></script>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
</head>
<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this">通知</li>
                <li>私信
                    <c:if test="${sessionScope.messageCount>0}">
                        <span class="layui-badge">${sessionScope.messageCount}</span>
                    </c:if>

                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
                    </div>
                    <table id="notice"  lay-filter="notice"></table>
                </div>
                <div class="layui-tab-item">
                    <script type="text/html" id="toolbarDemo">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" lay-event="new">
                            新消息
                        </button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct"
                                lay-event="readyAll">已读消息
                        </button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" lay-event="ready">
                            标记已读
                        </button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" lay-event="del">
                            删除
                        </button>
                    </script>
                    <table id="message" lay-filter="message"></table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="send">回信</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    layui.use(['element','table','util','layer','form'], function () {
        var element = layui.element;
        var table=layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        //一些事件触发
        element.on('tab(demo)', function (data) {
        });
        table.render({
            elem:'#notice'
            ,url:'/user/message/selectAll?rid='+${sessionScope.user.rid},
            title:'通知表格',
            cols:[[
                {type: 'numbers', fixed: 'left', title: "id"}
                , {field: 'mid', title: 'ID', width: 80, fixed: 'left', hide: true}
                , {field: 'mname', title: '公告内容', width: 918, edit: 'text'}
                , {field: 'createdate', title: '创建时间', width: 300, templet: function (d) {
                        return util.toDateString(d.createdate, "yyyy-MM-dd HH:mm:ss")
                    },sort: true
                }
            ]],
            page:true,
            skin:'line',
            even:'true',
            id:'noticeTable'
        })

        table.render({
            elem:'#message',
            url:'/user/message/selectAllMessage',
            where:{
                toId:${sessionScope.user.uid},

            },
            title: '私信表格',
            toolbar: '#toolbarDemo',
            cols:[[
                {type: 'numbers', fixed: 'left', title: "id"},
                {type: 'checkbox', fixed: 'left'}
                , {field: 'mid', title: 'ID', width: 80, fixed: 'left', hide: true}
                , {field: 'mname', title: '私信内容', width: 300, edit: 'text'}
                , {
                    field: 'createdate', title: '创建时间', width: 300, templet: function (d) {
                        return util.toDateString(d.createdate, "yyyy-MM-dd HH:mm:ss")
                    }
                },{field: 'fromId', title: '来信id', width: 300, edit: 'text',hide: true},
                {field: 'uname', title: '来信人', width: 300, edit: 'text',sort:true}
                ,{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]],
            page:true,
            skin:'line',
            even:'true',
            id:'messageTable'
        })
        /*头部事件栏*/
        table.on('toolbar(message)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'del':
                    layer.confirm('真的删除所有选中行？', {icon: 3, title: '询问'}, function () {
                        var data = checkStatus.data;
                        if (data.length > 0) {
                            /*后端删除*/
                            var ids = []
                            for (let i = 0; i < data.length; i++) {
                                ids.push(parseInt(data[i].mid))
                            }
                            console.log(ids);


                            /*前端删除*/
                            layer.confirm('确定删除选中' + data.length + '条数据？', {
                                icon: 3,
                                title: '提示信息'
                            }, function (index) {
                                //layui中找到CheckBox所在的行，并遍历找到行的顺序
                                $("div.layui-table-body table tbody input[name='layTableCheckbox']:checked").each(function () { // 遍历选中的checkbox
                                    n = $(this).parents("tbody tr").index();  // 获取checkbox所在行的顺序
                                    //移除行
                                    $("div.layui-table-body table tbody ").find("tr:eq(" + n + ")").remove();
                                    //如果是全选移除，就将全选CheckBox还原为未选中状态
                                    $("div.layui-table-header table thead div.layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");

                                });
                                /*后端删除*/
                                if(deleteByIds(ids)>0){
                                    layer.msg("删除成功！")
                                }
                                layer.close(index);
                            })
                        } else {
                            layer.msg("请选择需要删除的行");
                        }
                    });
                    break;
                case 'readyAll':
                    table.reload(
                        'messageTable', {
                            where: { //设定异步数据接口的额外参数，任意设
                                url: '/user/message/selectAllMessage',
                                isRead: 1
                            }
                            ,page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    break;
                case 'ready':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        var ids = []
                        for (let i = 0; i < data.length; i++) {
                            ids.push(parseInt(data[i].mid))
                        }
                        /*前端删除*/
                        layer.confirm('即将把' + data.length + '条数据放入已读信箱', {
                            icon: 3,
                            title: '提示信息'
                        }, function (index) {
                            //layui中找到CheckBox所在的行，并遍历找到行的顺序
                            $("div.layui-table-body table tbody input[name='layTableCheckbox']:checked").each(function () { // 遍历选中的checkbox
                                n = $(this).parents("tbody tr").index();  // 获取checkbox所在行的顺序
                                //移除行
                                $("div.layui-table-body table tbody ").find("tr:eq(" + n + ")").remove();
                                //如果是全选移除，就将全选CheckBox还原为未选中状态
                                $("div.layui-table-header table thead div.layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");

                            });
                            /*后端删除*/
                            if(updateByIds(ids)>0){
                                layer.msg(ids.length+"封私信放入已读信箱！")
                            }
                            layer.close(index);
                        })
                    } else {
                        layer.msg("未选中信息");
                    }
                    break;
                case 'new':
                    table.reload(
                        'messageTable', {
                            where: { //设定异步数据接口的额外参数，任意设
                                url: '/user/message/selectAllMessage',
                                isRead: 0
                            }
                            ,page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    break;
                case 'add':
                    close = layer.open({
                        type: 1
                        , content: $('#addMessage'),
                    });

            }

        });
        table.on('tool(message)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'send') {
                layer.prompt({
                    title:'回信',
                    formType: 2
                    ,value: data.tname
                }, function(value, index){
                    add(${sessionScope.user.uid},obj.data.fromId,value)
                    layer.close(index);
                });
            }
        });
        /*批量删除用户的方法*/
        function deleteByIds(ids) {
            $.ajax({
                type: "post",
                data: {"ids": ids},
                url: "/user/message/deleteByIds",
                dataType: 'json',
                traditional: true
            })
        }
        /*批量删除用户的方法*/
        function updateByIds(ids) {
            $.ajax({
                type: "post",
                data: {"ids": ids,"toId":${sessionScope.user.uid}},
                url: "/user/message/updateByIds",
                dataType: 'json',
                traditional: true,
                success:function (date) {
                    if(date>0){
                        element.render()
                    }

                }
            })
        }
        function add(fromId,toId,mname){
            $.ajax({
                type:"get",
                data:{
                    "fromId":fromId,
                    "toId":toId,
                    "mname":mname
                },
                url: "/user/message/sendMessage",
                success:function (date){
                    console.log(date);
                    if(date>0){
                        layer.msg("发送成功")
                    }

                }
            })
        }
    });
</script>
</body>
</html>
